<template>
  <div>
    <el-cascader
      v-model="value"
      :options="options"
      :props="selectprops"
      filterable
      :disabled="disabled"
      clearable
      @change="handleChange"
    />
  </div>
</template>
<script setup lang="ts">
import { getAllRegion, getRegionList } from "@/api/region";
import { RegionType } from "@/api/region/type";
import { CascaderProps, CascaderValue } from "element-plus";

defineOptions({
  name: "RegionSelect",
});
const props = defineProps({
  modelValue: {
    type: Array as () => string[],
    default: [],
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  checkStrictly: {
    type: Boolean,
    default: false,
  },
});
const value = ref(props.modelValue);
const options = ref<RegionType[]>([]);
const regions = ref<RegionType[]>([]);
const selectprops: CascaderProps = {
  expandTrigger: "hover" as const,
  value: "id",
  label: "name",
  checkStrictly: props.checkStrictly,
};
const getRegion = async () => {
  const data = await getRegionList();
  const region = await getAllRegion();
  options.value = data;
  regions.value = region;
};
getRegion();
const emit = defineEmits(["update:modelValue", "change"]);
const handleChange = (region: CascaderValue) => {
  console.log(region);
  emit("update:modelValue", region);
  // @ts-ignore
  const selectRegion = region?.map((item) => {
    return regions.value.find((region) => region.id === item);
  });
  emit("change", selectRegion);
};
</script>

<style lang="scss" scoped></style>
